import React,{useEffect, useMemo,useState} from 'react'

export default function App(props) {
    const [num, setNum] = useState(0);
    const [age, setAge] = useState(100);
    // useMemo(() => {
    //     //相当于constructor,componentWillMount
    //     console.log('1111', document.querySelector("button"))
    // }, []);


    //相当于componentDidMount与componentDidUpdate的结合体
    // useEffect(() => {
    //     //1.挂载之后执行:componentDidMount
    //     //2.状态更新之后会重新渲染,渲染完成之后执行:componentDidUpdate
    //     console.log('useEfect', document.querySelector("button").innerText)
    // })


     // 相当于componentDidMount
    // useEffect(()=>{
    //     console.log("useEffect",document.querySelector("button").innerText);
    // },[])

/*     第二个参数是一个数组，可以省略
    1- 如果省略数组，那么第一个参数（回调函数）会在挂载完成后以及更新渲染完成后执行。
    2- 如果数组设置为[]，那么第一个参数（回调函数）只会在挂载完成后执行。
    3- 如果数据设置为[num],那么挂载完成后执行，num发生改变后执行
    4- 如果数据设置为[num,age],那么挂载完成后执行，num或age发生改变后执行 */
    useEffect(()=>{
        console.log("useEffect",document.querySelector("button").innerText);
    },[age,num])
  return (
      <div>
          <button onClick={() => setNum(100)}>num:{num}</button>
          <button onClick={() => setAge(99)}>age:{age}</button>
      </div>
  )
}
